<template>
    <el-container>
        <el-aside width="200px" v-loading="showArealoading">
            <el-container>
                <el-header>
                    <el-input placeholder="输入关键字进行过滤" v-model="areaFilterText" clearable></el-input>
                </el-header>
                <el-main class="nopadding">
                    <el-tree ref="area" class="menu" :data="areaList" :props="areaProps" :current-node-key="''"
						:highlight-current="true" :expand-on-click-node="false"  lazy :load="loadArea"
                        :filter-node-method="areaFilterNode" @node-click="areaClick">
                    </el-tree>
                </el-main>
            </el-container>
        </el-aside>
        <el-container>
            <el-header>
				<div class="left-panel">
					<el-button type="primary" v-auth="'sys:area:add'" icon="el-icon-plus" @click="addInfo"></el-button>
				</div>
			</el-header>
            <el-main class="nopadding">
                <scTable ref="table" :apiObj="listApi" row-key="id" :params="listApiParams"
                    @selection-change="selectionChange" hidePagination>
                    <el-table-column type="selection" min-width="50"></el-table-column>
                    <el-table-column label="ID" prop="area_id" min-width="80" sortable='custom'></el-table-column>
                    <el-table-column label="区域编码" prop="area_code" min-width="80"></el-table-column>
                    <el-table-column label="区域名称" prop="area_name" min-width="150"></el-table-column>
                    <el-table-column label="排序" prop="sort_code" min-width="150"></el-table-column>
                    <el-table-column label="简拼" prop="simple_spelling" min-width="150"></el-table-column>
                    <el-table-column label="层次" prop="layer" min-width="80"></el-table-column>
                    <el-table-column label="是否启用" prop="status" min-width="100">
                        <template #default="scope">
                            <el-switch v-model="scope.row.status" :loading="scope.row.$switch_status" active-value="1"
                                inactive-value="0" disabled></el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column label="创建时间" prop="created_at" min-width="150"></el-table-column>
                    <el-table-column label="创建人" prop="created_by" min-width="150"></el-table-column>
                    <el-table-column label="操作" fixed="right" align="right" min-width="80">
                        <template #default="scope">
                            <el-button-group>
                                <el-button text type="primary" v-auth="'sys:area:edit'" size="small"
                                    @click="table_edit(scope.row, scope.$index)">编辑</el-button>
                            </el-button-group>
                        </template>
                    </el-table-column>
                </scTable>
            </el-main>
        </el-container>
    </el-container>
    <list-dialog v-if="dialog.list" ref="listDialog" @success="handleListSuccess"
        @closed="dialog.list = false"></list-dialog>
</template>

<script>
import listDialog from './list'

export default {
    name: 'dict',
    components: {
        listDialog
    },
    data() {
        return {
            dialog: {
                area: false,
                info: false
            },
            showArealoading: true,
            areaList: [],
            areaFilterText: '',
            areaProps: {
                value: "parent_id",
                label: "area_name"
            },
            listApi: this.$API['sys.area'].index,
            listApiParams: {
                parent_id: -1
            },
            selection: [],
        }
    },
    watch: {
        areaFilterText(val) {
            this.$refs.area.filter(val);
        }
    },
    mounted() {
        this.getArea()
    },
    methods: {
        //加载地区数据
        async getArea() {
            let res = await this.$API['sys.area'].index.get();
            this.showArealoading = false;
            this.areaList = res.data.list;
        },

        //地区过滤
        areaFilterNode(value, data) {
            if (!value) return true;
            return data.area_name.indexOf(value) !== -1;
        },

        //地区点击事件
        areaClick(data) {
            let params = {
                parent_id: data.area_code
            }
            this.$refs.table.reload(params)
        },


        //懒加载地区数据
        async loadArea(node, resolve) {
            if (node.level === 0 || node.level >= 4) return resolve([]);

            let res = await this.$API['sys.area'].index.get({
                parent_id: node.data.area_code
            });

            //判断数据
            if (res.code == 0) {
                resolve(res.data.list);
            } else {
                return resolve([]);
            }
        },


        //添加
        addInfo() {
            this.dialog.list = true
            this.$nextTick(() => {
                let areaCurrentKey = this.$refs.area.getCurrentNode();
                const data = {
                    area: areaCurrentKey
                }
                this.$refs.listDialog.open().setData(data)
            })
        },

        //编辑
        table_edit(row) {
            this.dialog.list = true
            this.$nextTick(() => {
                this.$refs.listDialog.open('edit').setData(row)
            })
        },

        //本地更新数据
        handleListSuccess(data, mode) {
            if (mode == 'add') {
                data.id = new Date().getTime()
                this.$refs.table.tableData.push(data)
            } else if (mode == 'edit') {
                this.$refs.table.tableData.filter(item => item.id === data.id).forEach(item => {
                    Object.assign(item, data)
                })
            }
        },

        //搜索
        upsearch() {
            this.$refs.table.upData(this.search)
        }
    }
}
</script>

<style></style>
